<template>
  <SelectList
    v-model="isSelected"
    :visible.sync="dialogVisible"
    :list="userListFormat"
    :loading="loading"
    :total="total"
    title="操作人选择"
    v-bind="attrs"
    @onConfirm="handleConfirm"
    @onPageChange="handlePageChange"
    @onSearch="handleSearch"
  />
</template>
<script>
import SelectList from '@/components/SelectList/SelectList.vue'
import { getAllUser } from '@/api/v2/personnel'
export default {
  name: '',
  components: {
    SelectList
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userList: [],
      total: 0,
      loading: false,
      isSelected: []
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(v) {
        this.$emit('update:visible', v)
      }
    },
    attrs() {
      const attrs = { ...this.$attrs }
      return attrs
    },

    listeners() {
      const listeners = { ...this.$listeners }
      return listeners
    },
    userListFormat() {
      return this.userList.map(item => {
        return {
          label: item.username,
          value: item.id
        }
      })
    }
  },
  watch: {
    visible(n) {
      if (n) {
        this.getUsers()
      }
    }
  },
  methods: {
    async getUsers(params) {
      this.loading = true
      try {
        const res = await getAllUser(params)
        this.userList = res.data
        this.total = res.meta.total
      } catch (e) {
        throw new Error(e?.response?.data?.message || '用户列表获取失败')
      } finally {
        this.loading = false
      }
    },

    handleConfirm(e, valMap) {
      this.$emit('confirm', valMap)
    },

    handlePageChange(page, username) {
      this.getUsers({ page, username })
    },

    handleSearch({ page, keyword }) {
      // this.params.page = page
      // this.params.username = keyword
      this.getUsers({ page, username: keyword })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
